import React, { Component } from 'react';
import styles from './index.less';
import normal from '@/assets/normal.svg';
import CarbonEmission from '@/assets/CarbonEmission.svg';
import EnergyUsed from '@/assets/EnergyUsed.svg';
import NumberIncr from '@/components/common/Number/index.jsx';
class CarbonInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      power_total: '', //备注: 今日用电总量
      carbon_total: '', //备注: 碳排放量
    };
  }
  componentWillReceiveProps(nextPorps) {
    if (nextPorps?.data && nextPorps.data?.power_total) {
      this.setState({
        power_total: nextPorps.data.power_total,
        carbon_total: nextPorps.data.carbon_total,
      });
    }
  }
  render() {
    const { power_total, carbon_total } = this.state;
    return (
      <div className={styles.CarbonInfo}>
        <div className={styles.title}>
          <img src={normal} alt="" />
          碳排放信息
        </div>
        <div className={styles.main}>
          <div className={styles.left}>
            <img src={EnergyUsed} />
            <div>
              <p className={styles.totalT}>今日总用电量</p>
              <p className={styles.total}>
                <NumberIncr
                  id={'numberIncr222'}
                  value={Number(power_total)}
                ></NumberIncr>
                kwh
              </p>
            </div>
          </div>
          <div className={styles.right}>
            <img src={CarbonEmission} />
            <div>
              <p className={styles.totalT}>今日碳排放量</p>
              <p className={styles.total}>
                <NumberIncr
                  id={'numberIncr1122'}
                  value={Number(carbon_total)}
                ></NumberIncr>
                g
              </p>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default CarbonInfo;
